<template>
	<div id="home">	
		<div id="map" class="map">
		</div>		
		<LeftContent @handleDialogVisible="showSSXX"></LeftContent>
		<div class="top_infoshow top_infoshow_home">
			<span class="cur_standNum">{{curStand.DRGSL}}</span>
			<span class="cur_standNum">{{curStand.SBZXL}}</span>
			<span class="cur_standNum">{{curStand.DRBJ}}</span>
			<span class="cur_standNum">{{curStand.DQLSL}}</span>
			<span class="cur_standNum">{{curStand.MSYL}}</span>
		</div>
		<div class="bar_right" :key="timer">
			<div class="bar_item" v-for="item,index in mapBarList" :key="index">
				<!-- <div class="bar_item" v-for="item in group" :key="item.index">
					
				</div> -->
				<div class="left_label">
					<img :src="item.img" alt="" class="bar_icon">
					<span class="bar_label">{{item.label}}</span>
				</div>
				<div v-if="item.hasSwitch" class="right_opt">
					<span v-if="item.num">{{item.num}}</span>
					<el-switch
						v-model="item.switch"
						@change="showswitch(item.switch,item.label)"
						active-value="true"
						inactive-value="false"
						active-color="rgba(6, 216, 90, 1)"
						inactive-color="rgba(255, 255, 255, 0.2)">
					</el-switch>
				</div>
			</div>			
		</div>
		<RightContent></RightContent>
		<!-- 预警信息 -->
		<div class="warning_wrapper" v-show="showWarPanel">
			<div v-for="item,index in warningArr" :key="index" :class="[index != 0 ? 'notFirst' : '','item']" >
				<div class="time row">
					<span class="text">{{item.time}}</span>
					<span class="icon"></span>
				</div>
				<div v-if="item.level == '1'" class="info row level1">
					<span  class="level">		
						Ⅰ级			
					</span>
					<span class="content">
						{{item.message}}
					</span>
				</div>
				<div v-if="item.level == '2'" class="info row level2">
					<span v-if="item.level == '2'" class="level">		
						Ⅱ级			
					</span>
					<span class="content">
						{{item.message}}
					</span>
				</div>
			</div>
		</div>
		<!-- 压力图例 -->
		<div class="pressureLegend">
			<div class="legend">
				<div class="content"></div>
			</div>
			<div class="marker">
				<span>0.3-0.4(Mpa)</span>
				<span>0.2-0.3(Mpa)</span>
				<span>0.1-0.2(Mpa)</span>
				<span>0-0.1(Mpa)</span>
			</div>
		</div>
		<!-- 进度条 -->
		<TimePlayer startTime="2" endTime="24" formatter="hh:mm" interval_time="4" step="2" @startPlay="playData" @showCurData="addPipeToMap"></TimePlayer>
		<!-- <ModalPanel v-if="dialogVisible" :visiable="dialogVisible" @update:dialogVisible="dialogVisible" ></ModalPanel> -->
		<ModalPanel v-if="dialogVisible" :visiable="dialogVisible" @closePanel="closePanel"></ModalPanel>
	</div>
</template>

<script>
let group1121 = require('@/assets/image/mapbar/Group 1121.png');
let group1122 = require('@/assets/image/mapbar/Group 1122.png');
let group1123 = require('@/assets/image/mapbar/Group 1123.png');
let vector2 = require('@/assets/image/mapbar/Vector-2.png');
let gjIcon = require('@/assets/image/mapbar/gaojing.png');
let lxIcon = require('@/assets/image/mapbar/liuxiang.png');
let ylyIcon = require('@/assets/image/mapbar/yly.png');//余氯仪
import {getDevicePTData} from '@/api/mapApi'
import util from '@/js/util'
export default {
	name: 'HomeCom',
	components:{
		RightContent:() => import ('./RightContent.vue'),
		LeftContent:() => import ('./LeftContent.vue'),
		PanelWrap:() => import ('@/components/PanelWrap'),
		ModalPanel:() => import ('./modalPanel.vue'),
		TimePlayer:() => import ('@/components/TimePlayer')
	},
	data() {
		return {
			fullTime: '',
			week: '',
			topActiveTab:0,//顶部选中tab
			gcSearchTime:'',
			curStand:{
				DRGSL:8000,
				SBZXL:98,
				DRBJ:2,
				DQLSL:16,
				MSYL:0.06
			},
			mapBarList:[
					{
						index:1,
						label:'江南水厂',
						type:'jnsc',
						num:'',
						img:group1121,
						switch:'true',
						hasSwitch:true
					},
					{
						index:2,
						label:'江北水厂',
						type:'jbsc',
						num:'',
						img:group1122,
						switch:'false',
						hasSwitch:true
					},
					{
						index:3,
						label:'管线',
						type:'gx',
						num:2000,
						img:vector2,
						switch:'true',
						hasSwitch:true
					},
					// {
					// 	index:4,
					// 	label:'消火栓',
					// 	type:'xhs',
					// 	num:188,
					// 	img:vector,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					// {
					// 	index:5,
					// 	label:'阀门',
					// 	type:'fm',
					// 	num:0,
					// 	img:vector1,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					// {
					// 	index:6,
					// 	label:'水表',
					// 	type:'sb',
					// 	num:20,
					// 	img:group561,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					{
						index:9,
						label:'压力表',
						type:'ylb',
						num:0,
						img:group1123,
						switch:'true',
						hasSwitch:true
					},
					{
						index:10,
						label:'余氯仪',
						type:'yly',
						num:0,
						img:group1123,
						switch:'true',
						hasSwitch:true
					},
					// {
					// 	index:12,
					// 	label:'井盖',
					// 	num:0,
					// 	type:'jg',
					// 	img:jgIcon,
					// 	switch:false,
					// 	hasSwitch:true
					// },
					{
						index:13,
						label:'告警',
						type:'gj',
						num:2,
						img:gjIcon,
						switch:'true',
						hasSwitch:true
					},
					{
						index:14,
						label:'流向',
						type:'lx',
						// num:5,
						img:lxIcon,
						switch:false,
						hasSwitch:true
					}
			],
			showMarkerLayer:true,
			timer:'',
			map:null,
			locaBaseLayer:null,
			loca:null,
			breathRed:null,//闪动的呼吸点
			layerGroup:null,
			mapElementsArray:{},
			pipesLayerGroup:null,//添加管线的群组
			overlayGrroups_ylb:null,//添加压力表的群组
			overlayGroups_yly:null,//添加余氯仪的群组
			// config_GJ:{
			// 	200:1,
			// 	300:2,
			// 	400:3,
			// 	600:4
			// },
			selectVal_GC:'全部',
			options_GW:[
				{value:'全部',label:'全部'},
				{value:'铸铁',label:'铸铁'},
				{value:'钢',label:'钢'},
				{value:'PE',label:'PE'}
			],
			selectval_GJ:'200',
			options_GJ:[
				{
					value:'200',
					label:'>=200mm'
				},
				{
					value:'300',
					label:'>=300mm'
				},
				{
					value:'400',
					label:'>=400mm'
				},
				{
					value:'600',
					label:'>=600mm'
				}
			],
			date_full:'',
			// date_week:'',
			timer:'',
			bjlbist:[],
			ycylsjList:[],//远程压力数据
			dialogVisible:false,
			warningArr:[
				{
					level:'1',
					time:'2022-11-23 11:37:25',
					message:'某某花园南段发生严重爆管，请立即前往处理！'
				},{
					level:'2',
					time:'2022-11-23 09:37:25',
					message:'某某花园南段发生严重爆管，请立即前往处理！'
				}
			],
			showWarPanel:true,//是否显示告警面板
			showInfoWindow:true,//地图信息框
			pressurePoints:[],
			infoWidnow:null,
			content_info:null,
			curTime:''//当前时间：yyyy-mm-dd
		}
	},
	created(){	
		this.curTime = util.getFullDate();
	},
	mounted() {
		document.cookie = 'testcookie=12345;express=30000';
		document.cookie = 'testcookie111=555;express=2000';
		this.initMap();
		this.initWaterSupply();		
	},
	beforeDestroy(){
		this.map.gl.getExtension('WEBGL_lose_context').loseContext() ;
	},
	watch: {
		selectval_GJ(val){
			this.selectPipeLine(this.selectVal_GC,val);
		},
		selectVal_GC(VAL){
			this.selectPipeLine(VAL,this.selectval_GJ);
		}
	},
	methods: {
		initMap() {	
			let that = this;
			window._AMapSecurityConfig = {
				securityJsCode:'f942bcd483b14957dd25aa7039f85570',
			}
            this.$AMapLoader.load({
				key: "7ba1c234cc901e5f5bd9f3e2f444abac",             // 申请好的Web端开发者Key，首次调用 load 时必填
				// key:'e43e1003d8b128cad822ef01ae24e4d4',
				version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				Loca:{
					version:'2.0.0'
				}
			}).then((AMap) => {
                    that.map = new AMap.Map("map", {  //设置地图容器id
						viewMode: "3D",    //是否为3D地图模式
						zoom: 15,           //初始化地图级别
						center: [105.066476, 28.740807], //初始化地图中心点位置
						mapStyle: 'amap://styles/9eb96389790fbf01cc795d7d86d1baf3',
						// mapStyle: 'amap://styles/d3a59cf36af457e0da4b54722d475763',
						zIndex:10,
						pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
					});
					// this.createInfoWindow();
				//获取设备点位数据
					this.addtDeviceData();
				//管线数据
					this.addPipeToMap();
				//添加管网流动layer
					this.addLoca();					
					
			})			
		},
		showSSXX(){
			this.dialogVisible = true;
		},
		closePanel(){
			this.dialogVisible = false;
		},
		initWaterSupply(){
			//计算日供水量
			let allTime = 24 * 60 * 60 * 1000;
			let today = new Date();
			let startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0).getTime();//当日零点
			let nowTime = today.getTime();//当前时间戳
			let nowWaterSupply = parseInt((nowTime-startTime) * 8000 / allTime);
			this.curStand.DRGSL = nowWaterSupply;
			this.inter_waterSupply = setInterval(()=>{
				this.curStand.DRGSL += 5;
			},5000)
		},	
		toggleTopTab(index){
			this.topActiveTab = index;
			//每一次切换都清除一下地图元素
			if(index == 1){
				this.mapBarList = this.mapBarList_yljc;
				this.timer = new Date();
				if(this.mapElementsArray['yl'] && this.mapElementsArray['yl'].length > 0){
					this.mapElementsArray['yl'].forEach(item => {
						item.show();
					})
				}else{
					//添加压力marker
					this.addPressureMarker();
				}
			}else{				
				if(index == 0){
					this.mapBarList = this.mapBarList_init;
				}
				this.mapElementsArray['yl'].forEach(item => {
					item.hide();
				})
			} 
		},
		hideHome(){
			this.topActiveTab = 100;
		},				
		addtDeviceData(){			
			getDevicePTData({}).then((res)=>{
				let that = this;
				if(res.status == 200){
					//添加marker
					let markers_ylb = [];//压力表
					let markers_yly = [];//余氯仪
					for (let i = 0; i < res.data.length; i++) {
						const item = res.data[i];
						let total = item.total;
						let type = item.type;
						if(['压力表','余氯仪'].indexOf(type) != -1){
							let points = item.deviceNodes;
							for (let j = 0; j < this.mapBarList.length; j++) {
								const item = this.mapBarList[j];
								if(item.type == type){
									item.num = total;
								}
							}
							let iconImgSrc = null;
							let attrName = '';
							if('压力表' == item.type){
								attrName = 'ylj';
								iconImgSrc = group1123;
								this.pressurePoints = points;
							}else if('余氯仪' == item.type){
								attrName = 'jg';
								iconImgSrc = ylyIcon;
							}
							let icon = new AMap.Icon({
									image: iconImgSrc,
									// imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
									// imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
								});
							for (let i = 0; i < points.length; i++) {
								let lnglat = points[i].coordinates;
								// 创建点实例
								let marker = new AMap.Marker({
									position: new AMap.LngLat(lnglat[0], lnglat[1]),
									icon: icon,
									type:attrName,
									offset:[-9,-22]							
								});
								if('余氯仪' == item.type){
									markers_yly.push(marker);
								}else if('压力表' == item.type){
									markers_ylb.push(marker);
									//点击，显示infoWindow
									marker.on('click',(e) => {
										let lng = e.target._position.lng;
										let lat = e.target._position.lat;
										// that.map.setCenter([lng,lat]);
										for (let i = 0; i < that.pressurePoints.length; i++) {
											const element = that.pressurePoints[i];
											if(element.coordinates[0] == lng && element.coordinates[1] == lat){
												let code = element.code;
												let name = element.property.name;
												let batteryValue = element.property.batteryValue;
												let installTime = element.property.installTime;
												let installAddress = element.property.installAddress;
												let pressureVos = element.property.pressureVos;
												let htmlStr = `<div class="infoWindow" v-show="showInfoWindow">
																	<div v-if="1==2" class="top">
																		<span class="title">设备基本信息</span>
																	</div>
																	<div class="content">
																		<div class="info">
																			<div class="info_img">
																			</div>
																			<ul class="info_decs">
																				<li>
																					<span class="label">编号：</span>
																					<span class="val">${code}</span>
																				</li>
																				<li>
																					<span class="label">名称：</span>
																					<span class="val">${name}</span>
																				</li>
																				<li>
																					<span class="label">电池：</span>
																					<span class="val">${batteryValue}</span>
																				</li>
																				<li>
																					<span class="label">安装时间：</span>
																					<span class="val">${installTime}</span>
																				</li>
																				<li>
																					<span class="label">位置：</span>
																					<span class="val">${installAddress}</span>
																				</li>
																			</ul>
																		</div>
																		<div class="charts_press">
																			<div class="title">
																				<span class="text">24小时压力变化曲线</span>
																				<span class="icon"></span>	
																			</div>
																			<div id="chart_press"></div>
																		</div>
																	</div>
																</div>`;
												that.infoWindow = new AMap.InfoWindow({
													content:htmlStr,
													offset:[0,-25]
												})
												that.infoWindow.open(that.map,e.target._position);
												that.paintChart_press(pressureVos);
											}
										}										
									})
								}	
								
							}										
						}
					}
					// 创建覆盖物群组，并将 marker 传给 OverlayGroup
					this.overlayGroups_ylb  = new AMap.OverlayGroup(markers_ylb);
					this.map.add(this.overlayGroups_ylb);
					this.overlayGroups_yly  = new AMap.OverlayGroup(markers_yly);
					this.map.add(this.overlayGroups_yly);			
				}
			})	
		},
		addPipeToMap(_time){
			//先清空
			let that = this;
			let time = _time || `${new Date().getHours()}:00`;
			this.$axios.post('http://43.136.137.111:9898/jiangan/pipe/network/pressure/rest',{time:time}).then(res => {
				if(res.status == 200){
					let pipeData = res.data.data	
					let polylineArr = [];
					for (let i = 0; i < pipeData.length; i++) {
						const element = pipeData[i];
						let path = element.coordinates;
						let color = '';
						if(element.pressureValue > 0 && element.pressureValue <= 0.1){
							color = '#12EBF2';
						}else if(element.pressureValue > 0.1 && element.pressureValue <= 0.2){
							color = '#14C111';
						}else if(element.pressureValue > 0.2 && element.pressureValue <= 0.3){
							color = '#0F5CF0';
						}else if(element.pressureValue > 0.3 && element.pressureValue <= 0.4){
							color = '#F08B15';
						}
						var Polyline = new AMap.Polyline({
								path: path,  
								strokeWeight: 6, // 线条宽度，默认为 1
								strokeColor: color, // 线条颜色
								lineJoin: 'round', // 折线拐点连接处样式
								zIndex:1,
								bubble :true,
								strokeWeight :5,
								isOutline:true,
								geodesic:true,
								lineCap:'round'
							});
							polylineArr.push(Polyline)						
					}
					var layerGroup = new AMap.LayerGroup(polylineArr);
					that.pipesLayerGroup = layerGroup;
    				layerGroup.setMap(that.map);
				}
			})	
		},		
		addLoca(){
			this.loca = new Loca.Container({
					map:this.map
				});
				window._loca = this.loca;	
				var layer = new Loca.PulseLineLayer({
					// loca,
					zIndex: 114,
					opacity: 1,
					visible: true,
					zooms: [2, 22],
					// visible:false
				});
				this.locaLayer = layer;
				// var headColors = ['#EFBB51', '#7F3CFF', '#4CC19B', '#0B5D74', '#E06AC4', '#223F9B', '#F15C1A', '#7A0FA6'];
				let scsdICon = require('@/assets/image/sc_sd.png');
				//请求数据
				this.$axios.get('http://43.136.137.111:9898/jiangan/flow/direction').then(res => {
					let geoSource = new Loca.GeoJSONSource({    
						data: res.data
					})
					this.locaLayer.setSource(geoSource);
					this.locaLayer.setStyle({
						altitude: 0,
						lineWidth: 4,
						// 脉冲头颜色
						// headColor: (_, feature) => {
						// 	return headColors[feature.properties.type - 1];
						// },
						headColor:'#FFF',
						// 脉冲尾颜色
						trailColor: 'rgba(255, 255, 255, 0.3)',
						// 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
						interval: 0.25,
						// 脉冲线的速度，几秒钟跑完整段路
						duration: 2000,
					});

					// 红色呼吸点
					var geoLevelF = new Loca.GeoJSONSource({
						data: {
								"type": "FeatureCollection",
								"features": [
									{
										"type": "Feature",
										"geometry": {
											"type": "Point",
											"coordinates": [105.077615,28.72778]
										},
										"properties": {
											"name": "江南水厂",
											// "value": 116.7527076,
											// "level": "F",
											// "month": 202005
										}
									}
								]
							}
					});
					this.breathRed = new Loca.ScatterLayer({
						loca:this.loca,
						zIndex: 113,
						opacity: 1,
						zooms: [2, 22],
					});
					this.breathRed.setSource(geoLevelF);
					this.breathRed.setStyle({
						unit: 'meter',
						size: [400,460],
						borderWidth: 0,
						// texture: scsdICon,
						texture:'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
						duration: 500,
						animate: true,
					});
					this.loca.animate.start();
				})			
		},
		selectPipeLine(pipe,pipeDiameter){
			this.mapElementsArray['gx'].map(item => {
				if (pipe == '全部'){
					if(item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}else{
					if(item.extData.pipe == pipe && item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}
			})
		},
		playData(_time){	
			this.pipesLayerGroup.clearLayers();
			this.addPipeToMap(_time);
		},
		hideMarkerLayer(){
			if(!this.showMarkerLayer){
				this.layerGroup.hide();
			}else{
				this.layerGroup.show();
			}
			this.showMarkerLayer = !this.showMarkerLayer;
		},
		
		showswitch(oldVal,label){
			let attrName = '';
			if('管线' == label){
				if(oldVal == 'true'){
					this.pipesLayerGroup.show();
				}else{
					this.pipesLayerGroup.hide();
				}
			}else if('流向' == label){
				if(oldVal == 'true')
					// this.pipesLayerGroup.hide();
					this.loca.add(this.locaLayer);
				if(oldVal == 'false')
					this.loca.remove(this.locaLayer);
					// this.pipesLayerGroup.show();
			}else if('告警' == label){
				if(oldVal == 'true')
					this.showWarPanel = true;
				if(oldVal == 'false')
					this.showWarPanel = false;
			}else if('压力表' == label){
				if(oldVal == 'true')
					this.overlayGroups_ylb.show();
				if(oldVal == 'false')
					this.overlayGroups_ylb.hide();				
			}else if('余氯仪' == label){
				if(oldVal == 'true')
					this.overlayGroups_yly.show();
				if(oldVal == 'false')
					this.overlayGroups_yly.hide();		
			}else{
				// if('江南水厂' == label){
				// 	attrName = 'jnsc';
				// }else if('江北水厂' == label){
				// 	attrName = 'jbsc';
				// }					
			}
			
		},		
		paintChart_press(data){
			let datas = [];
			let times = [];
			for (let i = 0; i < data.length; i++) {
				const element = data[i];
				datas.push(element.pressureValue);
				times.push(element.collectTime);
			}
			let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						top:'25%',
						left: '10%',
						right: '10%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: times
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '(Mpa)'						
					},
					series: [
						{
							name: '24小时压力变化曲线',
							type: 'line',
							stack: 'Total',
							data:datas,
							symbol:'none',
							lineStyle:{
								color:'#E7A808'
							},
							areaStyle:{
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(231, 168, 8, 0.2)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(231, 168, 8, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
									//background: linear-gradient(360deg, rgba(231, 168, 8, 0.2) 28.99%, rgba(231, 168, 8, 0) 100%);

								}
							}
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_press'));
				myChart.setOption(option);
		}
	},

}
</script>
<style lang="less" scoped>

ul {
	padding: 0;
	margin: 0;
}

li {
	list-style: none;
}
#home {
	position: relative;
	height: 100%;
	min-width: 1920px;	
	#map{
		/deep/.amap-maps{
				.amap-info{
					width:450px;
					.amap-info-content{
						padding:0px;		
						width: 100%;
						height: 502px;		
						background-color: transparent;
						overflow: hidden;
						.infoWindow{
							width:100%;
							height:100%;
							background: url('~@/assets/image/infowindow_bg.png') no-repeat;
							.top{
								width:100%;
								height:48px;							
								.title{
									font-family: 'Source Han Sans CN';
									font-style: normal;
									font-weight: 500;
									font-size: 18px;
									line-height: 48px;
									color: #B0E7FF;
									padding-left: 15px;
								}
							}
							.content{
								.info{
									display: flex;
									flex-direction: row;
									margin: 20px;
									.info_img{
										display: flex;
										flex-direction: row;
										width:193px;
										height:198px;
										background: url('~@/assets/image/jiejing.png') no-repeat 0 0;
										background-size: 100% 100%;
									}
									.info_decs{
										margin-left: 10px;
										font-size: 14px;
										color: #fff;
										line-height: 20px;
										li{
											margin-bottom: 20px;
											.label{
												color:#54B8F8;
											}
										}									
									}
								}
								.charts_press{
									border-top:1px solid rgba(255,255,255,0.2);
									width:100%;
									height:250px;
									.title{
										height: 20px;
										width: 100%;
										margin-top: 10px;
										padding-left: 20px;
										.text{
											font-weight: 400;
											font-size: 16px;
											line-height: 27px;
											color: #B9EDFF;
										}
										.icon{
											display: inline-block;
											margin-left: 25px;
											width: 40px;
											height: 10px;
											background: url('~@/assets/image/Decorate@1x.png') no-repeat;
											background-size: 100% 100%;
										}
									}
									#chart_press{
										width:450px;
										height:160px;
									}
								}
							}
						}
						.amap-info-close{
							right: 17px;
							top: 8px;
							width: 32px;
							height: 32px;
							color: transparent;
							background: url('~@/assets/image/infowindow_close.png');
						}
					}
				}
				
			}
	}
	
	
	//顶部的当日指标面板
	.top_infoshow{
		position: absolute;
		left: 455px;
		top: 117px;
		width: 576px;
		height: 190px;
		// background: url('../assets/image/jczb_ng@1x.png');
		display: flex;
		align-content: space-around;
		box-sizing: border-box;
		padding: 0 10px;
		.cur_standNum{
			font-size: 32px;
			font-weight: 700;
			color: rgba(155, 194, 212, 1);
			width: 112px;
			text-align: center;
			line-height: 268px;
		}
	}
	.top_infoshow_home{				
		background: url('~@/assets/image/jczb_ng@1x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.top_infoshow_yl{
		width: 100%;
		height: auto;
		left: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		.info_item{
			display: flex;
			color: #ffffff;
			padding: 10px;
			background-color: rgba(10, 38, 54,0.7);
			.item_text{
				display: flex;
				flex-direction: column;
				padding: 0 10px;
				font-size: 12px;
				line-height: 18px;
				color: rgba(255, 255, 255, 0.7);
				.num{
					font-family: 'DIN Next LT Pro';
					font-style: normal;
					font-weight: 700;
					font-size: 28px;
					line-height: 34px;
					color: #0CAFC6;
				}

			}
		}
	}
	.bar_right{		
		width: 208px;
	}
	.bar_right_small{
		width:152px;
	}
	// .bar_wrap{
	// 		border-bottom: 0.4px solid rgba(255, 255, 255, 0.15);
			.bar_item{
				position: relative;
				display: flex;
				align-content: space-between;
				height: 42px;
				line-height: 42px;
				padding: 0 15px;
				font-family: 'Inter';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				.left_label{
					color: rgba(255, 255, 255, 0.7);
					flex: 1;
						img{
						vertical-align: middle;
					}
					.bar_label{
						padding-left: 3px;
					}
				}
				.right_opt{
					color: #FFFFFF;
					.el-switch{
						width: 28px;
						height: 14px;
					/deep/.el-switch__core{
						border: none;
					}
					/deep/.el-switch__core:after{
						width:13px;
						top: 2px;
					}
				}
			}
			
			
		}
		
	// }

	.selectGW{
		position: absolute;
		right: 530px;
		// top: 525px;
		bottom:120px;
		.select_wrap{
			width: 178px;
			height: 24px;
			background: linear-gradient(90deg, rgba(123, 205, 252, 0.1) -42.55%, rgba(123, 205, 252, 0.2) 96.15%);
			border-radius: 2px;
			// transform: matrix(-1, 0, 0, 1, 0, 0);
			display:flex;
			margin-bottom: 15px;
			border: 1px solid rgba(12, 175, 198, .6);
			.label{
				display: inline-block;
				width: 60px;
				color: rgba(255, 255, 255, 0.6);
				padding: 2px 5px;
			}	
			.el-select {
				width:120px;
				height:24px;

				/deep/.el-input {
					input::-webkit-input-placeholder {
						/* WebKit browsers */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-moz-placeholder {
						/* Mozilla Firefox 4 to 18 */
						color: rgba(255, 255, 255, 0.6);
					}

					input::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-ms-input-placeholder {
						/* Internet Explorer 10+ */
						color: rgba(255, 255, 255, 0.6);
					}

					.el-input__inner {
						height:24px;
						// border: 1px solid #235A8D;
						border: none;
						// border-radius: 4px;
						// background: rgba(35, 90, 141, 0.6);
						// color: rgba(255, 255, 255, 0.6);
						color: #FFFFFF;
						background-color: transparent;
						border-radius: 0;
						padding-left: 0;
					}

					.el-select__caret {
						color: rgba(255, 255, 255, 0.6);
						line-height: 24px;
					}
				}
			}
		}
	}
	
	.equipments_status{
		position:absolute;
		width: 100%;
		height:25px;
		display: flex;		
		bottom:109px;
		line-height: 25px;
		justify-content: center;
		font-size:14px;
		color:#FFFFFF;
		text-align: center;
		.label{
			width:85px;
			background: linear-gradient(180deg, rgba(123, 205, 252, 0) 0%, rgba(123, 205, 252, 0.2) 100%);
		}
		.item{
			width:56px;
			border-radius: 2px;
			margin:0 8px;
		}
		.normal{
			background: rgba(11, 206, 89, 0.3);
			border: 1px solid #0BCE59;
		}
		.unnormal{
			background: rgba(226, 17, 17, 0.3);
			border: 1px solid #E21111;
		}
		.offline{
			background: rgba(231, 168, 8, 0.3);
			border: 1px solid #E7A808;		
		}
	}	
	
	.warning_wrapper{
		position: absolute;
		// bottom: 100px;
		// top:886px;
		bottom: 16px;
		right: 480px;
		width: 439px;
		height: 168px;
		padding: 10px;
		background: rgba(149, 164, 171, 0.1);
		backdrop-filter: blur(4px);
		border-radius: 2px;
		border-width:1px;
		border-style: solid;
		border-image: linear-gradient(rgba(181, 188, 190, 0.4), rgba(181, 188, 190, 0)) 20 20 ;
		.item{
			width: 100%;
			.row{
				width: 100%;
				display: inline-block;				
			}
			.time{
				height: 27px;
				line-height: 27px;
				font-size: 16px;
				line-height: 27px;
				color: #9BC2D4;
				.icon{
					display: inline-block;
					width: 45px;
					height: 12px;
					background: url('~@/assets/image/Decorate@1x.png') no-repeat 100% 100%;
				}
			}
			.info{
				height: 37px;
				line-height: 37px;
				font-weight: 500;
				font-size: 14px;
				line-height: 21px;
				color: #FFFFFF;
				margin-top: 5px;
				display: flex;
				flex-direction: row;
				.level{
					width: 68px;
					height: 100%;
					line-height: 37px;
					margin-right: 5px;
					display: inline-block;
					text-align: center;
					font-size: 14px;
					vertical-align: middle;
					background: url('~@/assets/image/warning1.png') no-repeat 5px 9px;
					padding-left: 12px;
					box-sizing: border-box;
				}		
				.content{
					display: inline-block;
					height: 100%;
					line-height: 37px;
					padding-left: 10px;
					flex: 1;
				}		
			}
			.level1{
				.level{
					background-color: rgba(255, 56, 107, 0.2);
					border-left: 2px solid #FF386B;
				}					
				.content{
					background: url('~@/assets/image/Group 427319039.png');
				}
			}	
			.level2{
				.level{
					background-color: rgba(255, 145, 31, 0.2);
					border-left: 2px solid #FF911F;
				}					
				.content{
					background: url('~@/assets/image/Group 427319040.png');
				}
				}				
		}
		.notFirst{
			margin-top: 24px;
		}	
	}
	.time_player{
		width:438px;
	}
}
</style>